<template>
	<view>
		<!-- 头部导航组件 -->
		<view class="topbar">
			<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
				<block v-for="(item,index) in tabList" :key="index">
					<view class="box" @tap="tabtap(item.id)" :style="{width: boxWith}">
						<text @tap="tabtap(item.id)" :class="{active : item.id == tabIndex}">{{item.text}}</text>
					</view>
				</block>
			</scroll-view>
		</view>

	</view>
</template>


<script>
	export default {
		props: {
			//topbar数据
			tabList: {
				type: Array,
				default: []
			},
			//选中的组件，默认第一个
			tabIndex: {
				type: Number,
				default: 0
			},
			//每个tab的宽度
			boxWith: {
				type: String,
				default: '33.33%'
			}

		},
		methods: {
			tabtap(index) {
				//点击tab时把自己的index传给父组件index.vue
				this.$emit('tabtap', index);
			},

		}
	}
</script>


<style scoped lang="scss">
	.active {
		// background-image: linear-gradient(to right, #ccffff 0%, #ffcc00 100%);
		// border-top-right-radius: 50upx;
		border-bottom: 1rpx solid rgba(212, 48, 48, 1);
	}
	.topbar{
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 1px solid rgba(229, 229, 229, 1);
		margin-bottom: 10rpx;
		background: #FFFFFF;
	}
	
	.scroll {
		white-space: nowrap;
		width: 100%;
		background: #FFFFFF;

		.box {

			display: inline-block;
			text-align: center;
			padding: 20rpx 0;

			text {
				padding: 10rpx 0;
			}
		}
	}
</style>
